<template>
  <div>
    <div class="top">
      <div>
        <div class="tab">杭州杭儿厨管理有限公司</div>
        <el-select v-model="value" clearable placeholder="所有的门店(32)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div>
        <div class="tab">代办任务</div>
        <div class="count">{{ count }}</div>
      </div>
    </div>

    <div class="middle">
      <div class="outtab">
        <span class="name">财务统计-2020.03</span>
        <span class="more">更多></span>
      </div>
      <!-- 卡片 -->
      <el-row :gutter="12">
        <!-- 这里需要优化到生命周期slice(0,4) -->
        <el-col :span="6" v-for="item in CardData.slice(0, 4)" :key="item.id">
          <el-card shadow="hover">
            <div class="innertab">
              <span class="iconfont icon-xinxi"></span>
              <span>{{item.name}}</span>
            </div>
            <div class="price">￥{{item.price}}元</div>
            <div class="more">详情></div>
            <div></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="bottom">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>铺源概况</span>
            </div>
            <div id="main" style="width: 300px; height: 300px"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>月度综合空置率</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >详情></el-button
              >
            </div>
            <h1>2.3%</h1>
            <p>top5</p>
            <div
              v-for="o in VacancyData.slice(0, 5)"
              :key="o"
              class="text item"
            >
              <div>{{ o.event }}</div>
              <div>{{ o.race }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <ul>
              <li v-for="item in Event.slice(0, 5)" :key="item">
                <div class="top">
                  <img
                    style="width: 25px; height: 25px; border-radius: 50%"
                    src="../assets/images/avatar.jpg"
                    alt="头像.jpg"
                  />
                  <div class="content">
                    <span class="name">{{ item.name }} </span>
                    在<span class="address">{{ item.address }} </span>进行
                    <span class="do">{{ item.do }}</span>
                  </div>
                </div>
                <div class="bottom">{{ item.time }}分钟之前</div>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  // components:{
  //     "v-card":card
  // },
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      count: 56,
      CardData: [
        {
          id: "1",
          name: "全额付款",
          price: "662122.00",
        },
        {
          id: "2",
          name: "逾期欠款",
          price: "662122.00",
        },
        {
          id: "3",
          name: "充值金额",
          price: "662122.00",
        },
        {
          id: "4",
          name: "消费金额",
          price: "662122.00",
        },
        {
          id: "5",
          name: "更多业务",
          price: "662122.00",
        },
      ],
      VacancyData: [
        {
          event: "事件1",
          race: "15%",
        },
        {
          event: "事件2",
          race: "15%",
        },
        {
          event: "事件3",
          race: "15%",
        },
        {
          event: "事件4",
          race: "15%",
        },
        {
          event: "事件5",
          race: "15%",
        },
        {
          event: "事件6",
          race: "15%",
        },
      ],
      Event: [
        {
          name: "林店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "刘店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "康店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "大店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "林店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "林店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
        {
          name: "林店长",
          address: "青春广场",
          do: "签到",
          time: "2",
        },
      ],
    };
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getPie();
    });
  },
  methods: {
    getPie() {
      // 绘制图表
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          x: "left", //标题位置
          textStyle: {
            //标题内容的样式
            color: "#000",
            fontStyle: "normal",
            fontWeight: 100,
            fontSize: 16, //主题文字字体大小，默认为18px
          },
        },
        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
        },
        //图例
        legend: {
          //图例  标注各种颜色代表的模块
          // orient: 'vertical',//图例的显示方式  默认横向显示
          bottom: 10, //控制图例出现的距离  默认左上角
          left: "center", //控制图例的位置
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {
            //图例中文字的样式
            color: "#000",
            fontSize: 16,
          },
          data: ["已租", "可租", "装修", "其他"], //图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ["#32dadd", "#b6a2de", "#5ab1ef", "#FC5531"],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: "pie", //echarts图的类型   pie代表饼图
          radius: "50%", //饼图中饼状部分的大小所占整个父元素的百分比
          center: ["50%", "50%"], //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: [
            //每个模块的名字和值
            { name: "已租", value: 10 },
            { name: "可租", value: 30 },
            { name: "装修", value: 50 },
            { name: "其他", value: 50 },
          ],
          itemStyle: {
            normal: {
              label: {
                show: true, //饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true, //官网demo里外部标注上的小细线的显示隐藏    默认显示
              },
            },
          },
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang='less' scoped>
.top {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 60px;
  font-size: 14px;
  .tab {
    margin-bottom: 13px;
  }
  .count {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
  }
}
.middle {
  font-size: 14px;
  margin-bottom: 60px;
  .outtab {
    display: flex;
    justify-content: space-between;
    .more {
      color: #009dff;
    }
  }
  .el-row {
    margin-top: 20px;
  }
  .el-card {
    .innertab {
      margin-bottom: 10px;
      .iconfont {
        margin-right: 10px;
        color: #009DFF;
      }
    }
    .price {
      margin-bottom: 10px;
    }
    .more {
      text-align: right;
      color: #009dff;
    }
  }
}

.bottom {
  display: flex;
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 350px;
    height: 450px;
  }
  .box-card:nth-child(1) {
    h1 {
      text-align: center;
      font-size: 35px;
    }
    p {
      padding-bottom: 7px;
      border-bottom: 1px solid #dbdbdb;
    }
    .text {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }
  }
  ul {
    list-style: none;
    li {
      border-bottom: 1px solid #dbdbdb;
      margin-bottom: 10px;
      padding-bottom: 6px;
      .name{
          font-size: 14px;
      }
      .address {
        color: #009dff;
      }
      .do {
        color: #009dff;
      }
      .top {
        margin: 0;
        padding: 0;
        .content {
          line-height: 20px;
          margin-right: 70px;
          font-size: 13px;
        }
      }
      .bottom {
        margin-top: 20px;
        font-size: 13px;
        color: #999;
      }
    }
    li:nth-child(5){
        border: none;
    }
  }
}
</style>